|
1
|
|
|
/*! |
|
2
|
|
|
* iCheck v1.0.1, http://git.io/arlzeA |
|
3
|
|
|
* ================================= |
|
4
|
|
|
* Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization |
|
5
|
|
|
* |
|
6
|
|
|
* (c) 2013 Damir Sultanov, http://fronteed.com |
|
7
|
|
|
* MIT Licensed |
|
8
|
|
|
*/ |
|
9
|
|
|
|
|
10
|
|
|
(function($) { |
|
11
|
|
|
|
|
12
|
|
|
// Cached vars |
|
13
|
|
|
var _iCheck = 'iCheck', |
|
14
|
|
|
_iCheckHelper = _iCheck + '-helper', |
|
15
|
|
|
_checkbox = 'checkbox', |
|
16
|
|
|
_radio = 'radio', |
|
17
|
|
|
_checked = 'checked', |
|
18
|
|
|
_unchecked = 'un' + _checked, |
|
19
|
|
|
_disabled = 'disabled', |
|
20
|
|
|
_determinate = 'determinate', |
|
21
|
|
|
_indeterminate = 'in' + _determinate, |
|
22
|
|
|
_update = 'update', |
|
23
|
|
|
_type = 'type', |
|
24
|
|
|
_click = 'click', |
|
25
|
|
|
_touch = 'touchbegin.i touchend.i', |
|
26
|
|
|
_add = 'addClass', |
|
27
|
|
|
_remove = 'removeClass', |
|
28
|
|
|
_callback = 'trigger', |
|
29
|
|
|
_label = 'label', |
|
30
|
|
|
_cursor = 'cursor', |
|
31
|
|
|
_mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent); |
|
|
|
|
|
|
32
|
|
|
|
|
33
|
|
|
// Plugin init |
|
34
|
|
|
$.fn[_iCheck] = function(options, fire) { |
|
35
|
|
|
|
|
36
|
|
|
// Walker |
|
37
|
|
|
var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]', |
|
38
|
|
|
stack = $(), |
|
39
|
|
|
walker = function(object) { |
|
40
|
|
|
object.each(function() { |
|
41
|
|
|
var self = $(this); |
|
42
|
|
|
|
|
43
|
|
|
if (self.is(handle)) { |
|
44
|
|
|
stack = stack.add(self); |
|
45
|
|
|
} else { |
|
46
|
|
|
stack = stack.add(self.find(handle)); |
|
47
|
|
|
} |
|
48
|
|
|
}); |
|
49
|
|
|
}; |
|
50
|
|
|
|
|
51
|
|
|
// Check if we should operate with some method |
|
52
|
|
|
if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) { |
|
53
|
|
|
|
|
54
|
|
|
// Normalize method's name |
|
55
|
|
|
options = options.toLowerCase(); |
|
56
|
|
|
|
|
57
|
|
|
// Find checkboxes and radio buttons |
|
58
|
|
|
walker(this); |
|
59
|
|
|
|
|
60
|
|
|
return stack.each(function() { |
|
61
|
|
|
var self = $(this); |
|
62
|
|
|
|
|
63
|
|
|
if (options == 'destroy') { |
|
64
|
|
|
tidy(self, 'ifDestroyed'); |
|
65
|
|
|
} else { |
|
66
|
|
|
operate(self, true, options); |
|
67
|
|
|
} |
|
68
|
|
|
// Fire method's callback |
|
69
|
|
|
if ($.isFunction(fire)) { |
|
70
|
|
|
fire(); |
|
71
|
|
|
} |
|
72
|
|
|
}); |
|
73
|
|
|
|
|
74
|
|
|
// Customization |
|
75
|
|
|
} else if (typeof options == 'object' || !options) { |
|
76
|
|
|
|
|
77
|
|
|
// Check if any options were passed |
|
78
|
|
|
var settings = $.extend({ |
|
79
|
|
|
checkedClass: _checked, |
|
80
|
|
|
disabledClass: _disabled, |
|
81
|
|
|
indeterminateClass: _indeterminate, |
|
82
|
|
|
labelHover: true, |
|
83
|
|
|
aria: false |
|
84
|
|
|
}, options), |
|
85
|
|
|
|
|
86
|
|
|
selector = settings.handle, |
|
87
|
|
|
hoverClass = settings.hoverClass || 'hover', |
|
88
|
|
|
focusClass = settings.focusClass || 'focus', |
|
89
|
|
|
activeClass = settings.activeClass || 'active', |
|
90
|
|
|
labelHover = !!settings.labelHover, |
|
91
|
|
|
labelHoverClass = settings.labelHoverClass || 'hover', |
|
92
|
|
|
|
|
93
|
|
|
// Setup clickable area |
|
94
|
|
|
area = ('' + settings.increaseArea).replace('%', '') | 0; |
|
95
|
|
|
|
|
96
|
|
|
// Selector limit |
|
97
|
|
|
if (selector == _checkbox || selector == _radio) { |
|
98
|
|
|
handle = 'input[type="' + selector + '"]'; |
|
99
|
|
|
} |
|
100
|
|
|
// Clickable area limit |
|
101
|
|
|
if (area < -50) { |
|
102
|
|
|
area = -50; |
|
103
|
|
|
} |
|
104
|
|
|
// Walk around the selector |
|
105
|
|
|
walker(this); |
|
106
|
|
|
|
|
107
|
|
|
return stack.each(function() { |
|
108
|
|
|
var self = $(this); |
|
109
|
|
|
|
|
110
|
|
|
// If already customized |
|
111
|
|
|
tidy(self); |
|
112
|
|
|
|
|
113
|
|
|
var node = this, |
|
114
|
|
|
id = node.id, |
|
115
|
|
|
|
|
116
|
|
|
// Layer styles |
|
117
|
|
|
offset = -area + '%', |
|
118
|
|
|
size = 100 + (area * 2) + '%', |
|
119
|
|
|
layer = { |
|
120
|
|
|
position: 'absolute', |
|
121
|
|
|
top: offset, |
|
122
|
|
|
left: offset, |
|
123
|
|
|
display: 'block', |
|
124
|
|
|
width: size, |
|
125
|
|
|
height: size, |
|
126
|
|
|
margin: 0, |
|
127
|
|
|
padding: 0, |
|
128
|
|
|
background: '#fff', |
|
129
|
|
|
border: 0, |
|
130
|
|
|
opacity: 0 |
|
131
|
|
|
}, |
|
132
|
|
|
|
|
133
|
|
|
// Choose how to hide input |
|
134
|
|
|
hide = _mobile ? { |
|
135
|
|
|
position: 'absolute', |
|
136
|
|
|
visibility: 'hidden' |
|
137
|
|
|
} : area ? layer : { |
|
138
|
|
|
position: 'absolute', |
|
139
|
|
|
opacity: 0 |
|
140
|
|
|
}, |
|
141
|
|
|
|
|
142
|
|
|
// Get proper class |
|
143
|
|
|
className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio, |
|
144
|
|
|
|
|
145
|
|
|
// Find assigned labels |
|
146
|
|
|
label = $(_label + '[for="' + id + '"]').add(self.closest(_label)), |
|
147
|
|
|
|
|
148
|
|
|
// Check ARIA option |
|
149
|
|
|
aria = !!settings.aria, |
|
150
|
|
|
|
|
151
|
|
|
// Set ARIA placeholder |
|
152
|
|
|
ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.', ''), |
|
153
|
|
|
|
|
154
|
|
|
// Parent & helper |
|
155
|
|
|
parent = '<div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''), |
|
156
|
|
|
helper; |
|
157
|
|
|
|
|
158
|
|
|
// Set ARIA "labelledby" |
|
159
|
|
|
if (label.length && aria) { |
|
160
|
|
|
label.each(function() { |
|
161
|
|
|
parent += 'aria-labelledby="'; |
|
162
|
|
|
|
|
163
|
|
|
if (this.id) { |
|
164
|
|
|
parent += this.id; |
|
165
|
|
|
} else { |
|
166
|
|
|
this.id = ariaID; |
|
167
|
|
|
parent += ariaID; |
|
168
|
|
|
} |
|
169
|
|
|
|
|
170
|
|
|
parent += '"'; |
|
171
|
|
|
}); |
|
172
|
|
|
} |
|
173
|
|
|
// Wrap input |
|
174
|
|
|
parent = self.wrap(parent + '/>')[_callback]('ifCreated').parent().append(settings.insert); |
|
175
|
|
|
|
|
176
|
|
|
// Layer addition |
|
177
|
|
|
helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent); |
|
178
|
|
|
|
|
179
|
|
|
// Finalize customization |
|
180
|
|
|
self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide); |
|
181
|
|
|
!!settings.inheritClass && parent[_add](node.className || ''); |
|
182
|
|
|
!!settings.inheritID && id && parent.attr('id', _iCheck + '-' + id); |
|
183
|
|
|
parent.css('position') == 'static' && parent.css('position', 'relative'); |
|
184
|
|
|
operate(self, true, _update); |
|
185
|
|
|
|
|
186
|
|
|
// Label events |
|
187
|
|
|
if (label.length) { |
|
188
|
|
|
label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) { |
|
189
|
|
|
var type = event[_type], |
|
190
|
|
|
item = $(this); |
|
191
|
|
|
|
|
192
|
|
|
// Do nothing if input is disabled |
|
193
|
|
|
if (!node[_disabled]) { |
|
|
|
|
|
|
194
|
|
|
|
|
195
|
|
|
// Click |
|
196
|
|
|
if (type == _click) { |
|
197
|
|
|
if ($(event.target).is('a')) { |
|
198
|
|
|
return; |
|
199
|
|
|
} |
|
200
|
|
|
operate(self, false, true); |
|
201
|
|
|
|
|
202
|
|
|
// Hover state |
|
203
|
|
|
} else if (labelHover) { |
|
204
|
|
|
|
|
205
|
|
|
// mouseout|touchend |
|
206
|
|
|
if (/ut|nd/.test(type)) { |
|
207
|
|
|
parent[_remove](hoverClass); |
|
208
|
|
|
item[_remove](labelHoverClass); |
|
209
|
|
|
} else { |
|
210
|
|
|
parent[_add](hoverClass); |
|
211
|
|
|
item[_add](labelHoverClass); |
|
212
|
|
|
} |
|
213
|
|
|
} |
|
214
|
|
|
if (_mobile) { |
|
215
|
|
|
event.stopPropagation(); |
|
|
|
|
|
|
216
|
|
|
} else { |
|
217
|
|
|
return false; |
|
218
|
|
|
} |
|
219
|
|
|
} |
|
220
|
|
|
}); |
|
221
|
|
|
} |
|
222
|
|
|
// Input events |
|
223
|
|
|
self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) { |
|
224
|
|
|
var type = event[_type], |
|
225
|
|
|
key = event.keyCode; |
|
226
|
|
|
|
|
227
|
|
|
// Click |
|
228
|
|
|
if (type == _click) { |
|
229
|
|
|
return false; |
|
230
|
|
|
|
|
231
|
|
|
// Keydown |
|
232
|
|
|
} else if (type == 'keydown' && key == 32) { |
|
233
|
|
|
if (!(node[_type] == _radio && node[_checked])) { |
|
234
|
|
|
if (node[_checked]) { |
|
235
|
|
|
off(self, _checked); |
|
236
|
|
|
} else { |
|
237
|
|
|
on(self, _checked); |
|
238
|
|
|
} |
|
239
|
|
|
} |
|
240
|
|
|
return false; |
|
241
|
|
|
|
|
242
|
|
|
// Keyup |
|
243
|
|
|
} else if (type == 'keyup' && node[_type] == _radio) { |
|
244
|
|
|
!node[_checked] && on(self, _checked); |
|
|
|
|
|
|
245
|
|
|
|
|
246
|
|
|
// Focus/blur |
|
247
|
|
|
} else if (/us|ur/.test(type)) { |
|
|
|
|
|
|
248
|
|
|
parent[type == 'blur' ? _remove : _add](focusClass); |
|
|
|
|
|
|
249
|
|
|
} |
|
250
|
|
|
}); |
|
251
|
|
|
|
|
252
|
|
|
// Helper events |
|
253
|
|
|
helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) { |
|
254
|
|
|
var type = event[_type], |
|
255
|
|
|
|
|
256
|
|
|
// mousedown|mouseup |
|
257
|
|
|
toggle = /wn|up/.test(type) ? activeClass : hoverClass; |
|
258
|
|
|
|
|
259
|
|
|
// Do nothing if input is disabled |
|
260
|
|
|
if (!node[_disabled]) { |
|
|
|
|
|
|
261
|
|
|
|
|
262
|
|
|
// Click |
|
263
|
|
|
if (type == _click) { |
|
264
|
|
|
operate(self, false, true); |
|
265
|
|
|
|
|
266
|
|
|
// Active and hover states |
|
267
|
|
|
} else { |
|
268
|
|
|
|
|
269
|
|
|
// State is on |
|
270
|
|
|
if (/wn|er|in/.test(type)) { |
|
271
|
|
|
|
|
272
|
|
|
// mousedown|mouseover|touchbegin |
|
273
|
|
|
parent[_add](toggle); |
|
274
|
|
|
|
|
275
|
|
|
// State is off |
|
276
|
|
|
} else { |
|
277
|
|
|
parent[_remove](toggle + ' ' + activeClass); |
|
278
|
|
|
} |
|
279
|
|
|
// Label hover |
|
280
|
|
|
if (label.length && labelHover && toggle == hoverClass) { |
|
281
|
|
|
|
|
282
|
|
|
// mouseout|touchend |
|
283
|
|
|
label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass); |
|
284
|
|
|
} |
|
285
|
|
|
} |
|
286
|
|
|
if (_mobile) { |
|
287
|
|
|
event.stopPropagation(); |
|
|
|
|
|
|
288
|
|
|
} else { |
|
289
|
|
|
return false; |
|
290
|
|
|
} |
|
291
|
|
|
} |
|
292
|
|
|
}); |
|
293
|
|
|
}); |
|
294
|
|
|
} else { |
|
295
|
|
|
return this; |
|
296
|
|
|
} |
|
297
|
|
|
}; |
|
298
|
|
|
|
|
299
|
|
|
// Do something with inputs |
|
300
|
|
|
function operate(input, direct, method) { |
|
301
|
|
|
var node = input[0], |
|
302
|
|
|
state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked, |
|
303
|
|
|
active = method == _update ? { |
|
304
|
|
|
checked: node[_checked], |
|
305
|
|
|
disabled: node[_disabled], |
|
306
|
|
|
indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false' |
|
307
|
|
|
} : node[state]; |
|
308
|
|
|
|
|
309
|
|
|
// Check, disable or indeterminate |
|
310
|
|
|
if (/^(ch|di|in)/.test(method) && !active) { |
|
311
|
|
|
on(input, state); |
|
312
|
|
|
|
|
313
|
|
|
// Uncheck, enable or determinate |
|
314
|
|
|
} else if (/^(un|en|de)/.test(method) && active) { |
|
315
|
|
|
off(input, state); |
|
316
|
|
|
|
|
317
|
|
|
// Update |
|
318
|
|
|
} else if (method == _update) { |
|
319
|
|
|
|
|
320
|
|
|
// Handle states |
|
321
|
|
|
for (var state in active) { |
|
|
|
|
|
|
322
|
|
|
if (active[state]) { |
|
323
|
|
|
on(input, state, true); |
|
324
|
|
|
} else { |
|
325
|
|
|
off(input, state, true); |
|
326
|
|
|
} |
|
327
|
|
|
} |
|
328
|
|
|
} else if (!direct || method == 'toggle') { |
|
329
|
|
|
|
|
330
|
|
|
// Helper or label was clicked |
|
331
|
|
|
if (!direct) { |
|
332
|
|
|
input[_callback]('ifClicked'); |
|
333
|
|
|
} |
|
334
|
|
|
// Toggle checked state |
|
335
|
|
|
if (active) { |
|
336
|
|
|
if (node[_type] !== _radio) { |
|
337
|
|
|
off(input, state); |
|
338
|
|
|
} |
|
339
|
|
|
} else { |
|
340
|
|
|
on(input, state); |
|
341
|
|
|
} |
|
342
|
|
|
} |
|
343
|
|
|
} |
|
344
|
|
|
// Add checked, disabled or indeterminate state |
|
345
|
|
|
function on(input, state, keep) { |
|
346
|
|
|
var node = input[0], |
|
347
|
|
|
parent = input.parent(), |
|
348
|
|
|
checked = state == _checked, |
|
349
|
|
|
indeterminate = state == _indeterminate, |
|
350
|
|
|
disabled = state == _disabled, |
|
351
|
|
|
callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', |
|
352
|
|
|
regular = option(input, callback + capitalize(node[_type])), |
|
353
|
|
|
specific = option(input, state + capitalize(node[_type])); |
|
354
|
|
|
|
|
355
|
|
|
// Prevent unnecessary actions |
|
356
|
|
|
if (node[state] !== true) { |
|
357
|
|
|
|
|
358
|
|
|
// Toggle assigned radio buttons |
|
359
|
|
|
if (!keep && state == _checked && node[_type] == _radio && node.name) { |
|
360
|
|
|
var form = input.closest('form'), |
|
361
|
|
|
inputs = 'input[name="' + node.name + '"]'; |
|
362
|
|
|
|
|
363
|
|
|
inputs = form.length ? form.find(inputs) : $(inputs); |
|
364
|
|
|
|
|
365
|
|
|
inputs.each(function() { |
|
366
|
|
|
if (this !== node && $(this).data(_iCheck)) { |
|
367
|
|
|
off($(this), state); |
|
368
|
|
|
} |
|
369
|
|
|
}); |
|
370
|
|
|
} |
|
371
|
|
|
// Indeterminate state |
|
372
|
|
|
if (indeterminate) { |
|
373
|
|
|
|
|
374
|
|
|
// Add indeterminate state |
|
375
|
|
|
node[state] = true; |
|
376
|
|
|
|
|
377
|
|
|
// Remove checked state |
|
378
|
|
|
if (node[_checked]) { |
|
379
|
|
|
off(input, _checked, 'force'); |
|
380
|
|
|
} |
|
381
|
|
|
// Checked or disabled state |
|
382
|
|
|
} else { |
|
383
|
|
|
|
|
384
|
|
|
// Add checked or disabled state |
|
385
|
|
|
if (!keep) { |
|
386
|
|
|
node[state] = true; |
|
387
|
|
|
} |
|
388
|
|
|
// Remove indeterminate state |
|
389
|
|
|
if (checked && node[_indeterminate]) { |
|
390
|
|
|
off(input, _indeterminate, false); |
|
391
|
|
|
} |
|
392
|
|
|
} |
|
393
|
|
|
// Trigger callbacks |
|
394
|
|
|
callbacks(input, checked, state, keep); |
|
395
|
|
|
} |
|
396
|
|
|
// Add proper cursor |
|
397
|
|
|
if (node[_disabled] && !!option(input, _cursor, true)) { |
|
398
|
|
|
parent.find('.' + _iCheckHelper).css(_cursor, 'default'); |
|
399
|
|
|
} |
|
400
|
|
|
// Add state class |
|
401
|
|
|
parent[_add](specific || option(input, state) || ''); |
|
402
|
|
|
|
|
403
|
|
|
// Set ARIA attribute |
|
404
|
|
|
disabled ? parent.attr('aria-disabled', 'true') : parent.attr('aria-checked', indeterminate ? 'mixed' : 'true'); |
|
405
|
|
|
|
|
406
|
|
|
// Remove regular state class |
|
407
|
|
|
parent[_remove](regular || option(input, callback) || ''); |
|
408
|
|
|
} |
|
409
|
|
|
// Remove checked, disabled or indeterminate state |
|
410
|
|
|
function off(input, state, keep) { |
|
411
|
|
|
var node = input[0], |
|
412
|
|
|
parent = input.parent(), |
|
413
|
|
|
checked = state == _checked, |
|
414
|
|
|
indeterminate = state == _indeterminate, |
|
415
|
|
|
disabled = state == _disabled, |
|
416
|
|
|
callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', |
|
417
|
|
|
regular = option(input, callback + capitalize(node[_type])), |
|
418
|
|
|
specific = option(input, state + capitalize(node[_type])); |
|
419
|
|
|
|
|
420
|
|
|
// Prevent unnecessary actions |
|
421
|
|
|
if (node[state] !== false) { |
|
422
|
|
|
|
|
423
|
|
|
// Toggle state |
|
424
|
|
|
if (indeterminate || !keep || keep == 'force') { |
|
425
|
|
|
node[state] = false; |
|
426
|
|
|
} |
|
427
|
|
|
// Trigger callbacks |
|
428
|
|
|
callbacks(input, checked, callback, keep); |
|
429
|
|
|
} |
|
430
|
|
|
// Add proper cursor |
|
431
|
|
|
if (!node[_disabled] && !!option(input, _cursor, true)) { |
|
432
|
|
|
parent.find('.' + _iCheckHelper).css(_cursor, 'pointer'); |
|
433
|
|
|
} |
|
434
|
|
|
// Remove state class |
|
435
|
|
|
parent[_remove](specific || option(input, state) || ''); |
|
436
|
|
|
|
|
437
|
|
|
// Set ARIA attribute |
|
438
|
|
|
disabled ? parent.attr('aria-disabled', 'false') : parent.attr('aria-checked', 'false'); |
|
439
|
|
|
|
|
440
|
|
|
// Add regular state class |
|
441
|
|
|
parent[_add](regular || option(input, callback) || ''); |
|
442
|
|
|
} |
|
443
|
|
|
// Remove all traces |
|
444
|
|
|
function tidy(input, callback) { |
|
445
|
|
|
if (input.data(_iCheck)) { |
|
446
|
|
|
|
|
447
|
|
|
// Remove everything except input |
|
448
|
|
|
input.parent().html(input.attr('style', input.data(_iCheck).s || '')); |
|
449
|
|
|
|
|
450
|
|
|
// Callback |
|
451
|
|
|
if (callback) { |
|
452
|
|
|
input[_callback](callback); |
|
453
|
|
|
} |
|
454
|
|
|
// Unbind events |
|
455
|
|
|
input.off('.i').unwrap(); |
|
456
|
|
|
$(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i'); |
|
457
|
|
|
} |
|
458
|
|
|
} |
|
459
|
|
|
// Get some option |
|
460
|
|
|
function option(input, state, regular) { |
|
461
|
|
|
if (input.data(_iCheck)) { |
|
|
|
|
|
|
462
|
|
|
return input.data(_iCheck).o[state + (regular ? '' : 'Class')]; |
|
463
|
|
|
} |
|
464
|
|
|
} |
|
465
|
|
|
// Capitalize some string |
|
466
|
|
|
function capitalize(string) { |
|
467
|
|
|
return string.charAt(0).toUpperCase() + string.slice(1); |
|
468
|
|
|
} |
|
469
|
|
|
// Executable handlers |
|
470
|
|
|
function callbacks(input, checked, callback, keep) { |
|
471
|
|
|
if (!keep) { |
|
472
|
|
|
if (checked) { |
|
473
|
|
|
input[_callback]('ifToggled'); |
|
474
|
|
|
} |
|
475
|
|
|
input[_callback]('ifChanged')[_callback]('if' + capitalize(callback)); |
|
476
|
|
|
} |
|
477
|
|
|
} |
|
478
|
|
|
})(window.jQuery || window.Zepto); |
|
479
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.